<template>
    <div class="wallet-un-activate">

        <!-- 未开通 -->
        <div class="wallet-banner open-before" v-if="config.wallet_apply_state == 0">

            <cite>
                <h2>Activate your POD wallet for a smoother checkout experience.</h2>
                <button @click="openDialog()">Activate wallet</button>
            </cite>
            <figure><img src="@/assets/images/billing/wallet-inactive.png" alt=""></figure>
        </div>

        <div class="wallet-banner  open-review" v-if="config.wallet_apply_state == 1">
            <cite>
                <h2>Awaiting review</h2>
                <p>Your request has been submitted. We will review it within 24 hours.</p>
            </cite>
            <figure>
                <img src="@/assets/images/billing/wallet-review.png" alt="">
            </figure>
        </div>

        <!-- <div class="wallet-banner" v-if="config.wallet_apply_state == 2">
            通过
        </div> -->

        <div class="wallet-banner open-refuse" v-if="config.wallet_apply_state == 3">
            <h2>Your request has been rejected.</h2>
            <h3>Reason for rejection:</h3>
            <p v-text="config.reason"></p>
            <h6>If you have any questions about the review results, please contact customer service for assistance.</h6>
            <fieldset>
                <a target="_blank" href="https://m.me/PodPartnerCo">
                    <img src="https://img.podpartner.com/static/images-20231130/messenger.png" />
                    <span>Messenger</span>
                </a>

                <a target="_blank" href="http://wa.me/message/4V7UTTIJDLJFD1">
                    <img src="https://img.podpartner.com/static/images-20231130/whatsapp-active.png" />
                    <span>Whatsapp</span>
                </a>
            </fieldset>

            <figure><img src="@/assets/images/billing/wallet-refuse.png" alt=""></figure>
        </div>


        <BillingWalletRecentIntro />
        <BillingWalletRecentVia :config="config" @open="openDialog()" />
        <BillingWalletQuestions />


        <UxDialog :visible="agreement" @close="agreement = false" :canClose="false">

            <div class="agreement-dialog">
                <h2>POD Wallet Terms of Service</h2>

                <h3>Section 1. Term Definition</h3>
                <p>Throughout the site, the terms "we", "us" and "our" refer to PODpartner. "user," "you," and "your"
                    refer to the individual person, company, or organization that has visited or is using the Website or
                    Service of PODpartner; that accesses or uses any part of the account, or that directs the use of the
                    account in the performance of its functions. "wallet" refers to a feature within the PODpartner
                    platform that enables users to make payments more efficiently.</p>

                <h3>Section 2. Acceptance of Terms</h3>
                <p>2.1 By using this service, you agree to be bound by this agreement. If you do not agree to any part
                    of this agreement, please do not use this service. <br>2.2 PODpartner reserves the right to modify
                    this Agreement at any time. The modified Agreement will be published on the company's website. Your
                    continued use of this service constitutes acceptance of the modified Agreement.</p>


                <h3>Section 3. Service Description </h3>
                <p>3.1 The POD Wallet feature enables users to transfer funds in advance to a designated virtual account
                    within the PODpartner platform for the purpose of facilitating future order payments. Funds held in
                    the POD Wallet can be applied towards the purchase of goods or services offered on the PODpartner
                    platform. <br>3.2 Users may only deposit funds into the POD Wallet through payment channels
                    designated by PODpartner. <br>3.3 PODpartner reserves the right to modify, suspend, or discontinue
                    the Service at any time without prior notice, provided that User funds are adequately protected.</p>

                <h3>Section 4. User Eligibility and Obligations</h3>
                <p>4.1 To use the service, you must be at least 18 years old or the age of majority in your
                    jurisdiction. <br>4.2 You are responsible for providing PODpartner with accurate and truthful,
                    accurate, complete, and current information. <br>4.3 You agree not to disclose any payment
                    information provided by PODpartner to any third party. <br>4.4 You guarantee that the source of
                    funds is legal and you will comply with all applicable anti-money laundering and anti-terrorism
                    financing laws and regulations.</p>


                <h3>Section 5. Cashback Policy</h3>

                <p>5.1 PODpartner may offer cashback as a promotional benefit for users who deposit funds through
                    designated channels. PODpartner reserves the right to modify or terminate this cashback policy at
                    any time without prior notice. <br>5.2 Cashback amounts are non-refundable and can only be used to
                    pay for product orders on PODpartner platform.</p>


                <h3>Section 6. Refund Policy</h3>
                <p>6.1 Users may request a withdrawal of funds from their POD Wallet to a specified bank account at any
                    time. <br>6.2 The actual transferable amount shall be calculated as follows: POD Wallet balance
                    minus cashback amount minus any applicable transfer fees. Transfer fees are charged by third-party
                    payment processors and may vary depending on the transfer method used.</p>

                <h3>Section 7. Account Security</h3>
                <p>7.1 You are responsible for maintaining the security of your account, including safeguarding your
                    login credentials. You bear full responsibility for all transactions made using your POD Wallet
                    account. <br>7.2 If you discover any unauthorized use of your account, you must immediately notify
                    PODpartner.</p>

                <h3>Section 8. Service Suspension and Termination</h3>
                <p>8.1 PODpartner reserves the right to suspend, restrict, or terminate your use of the service under
                    the following circumstances:<br>(a) You have violated these Terms;<br>(b) You are suspected of fraud
                    or illegal activities;<br>(c) As requested by law enforcement or government agencies;<br>(d)
                    Detection of abnormal transactions or suspicious activities.<br>8.2 Upon termination of the Service,
                    you retain the right to request a withdrawal of funds from your POD Wallet as described in Section
                    6.<br>8.3 You may contact PODpartner to request the closure of the wallet function, thereby
                    terminating these Terms.</p>

                <h3>Section 9. Intellectual Property</h3>
                <p>9.1 All content, designs, trademarks, and other intellectual property in this Service are the
                    exclusive property of PODpartner.<br>9.2 Users may not use, copy, or distribute these materials
                    without the express written consent of PODpartner.</p>


                <h3>Section 10. Privacy Policy</h3>
                <p>10.1 PODpartner respects user privacy. For information on how we collect, use, and protect your
                    personal information, please refer to our Privacy Policy.<br>10.2 By using this service, you consent
                    to the processing of your personal data in accordance with our Privacy Policy.</p>

                <h3>Section 11. Dispute Resolution</h3>
                <p>11.1 These Terms shall be governed by and construed in accordance with the laws of the People's
                    Republic of China.<br>11.2 Any disputes arising out of or in connection with these Terms shall be
                    resolved through friendly negotiations.<br>11.3 The place of signing these Terms is Nanshan
                    District, Shenzhen, Guangdong Province, China. In the event of a dispute that cannot be resolved
                    through negotiation, the parties shall submit to the jurisdiction of the competent court in the
                    place where these Terms are signed.</p>



                <h3>Section 12. Miscellaneous</h3>
                <p>12.1 Entire Agreement: These Terms constitute the entire agreement between you and us with respect to
                    your use of the Services and use or access to the Site. These Terms supersede all prior agreements,
                    proposals or representations, written or oral, concerning the Services and the Site.<br>12.2
                    Severability: If it is determined that any term or provision of these Terms is invalid or
                    unenforceable, in whole or in part, then the invalid or unenforceable term or provision shall be
                    severed and the remaining terms and provisions shall be unimpaired.<br>12.3 Waiver: The failure of
                    PODpartner to enforce any right or provision of these Terms shall not constitute a waiver of such
                    right or provision.<br>12.4 Force Majeure: PODpartner shall not be liable for any service
                    interruption or termination due to force majeure events, including, but not limited to, natural
                    disasters, government actions, or war.<br>12.5 Assignment: You may not assign or transfer these
                    Terms (or any of your rights or obligations under them) without our prior written consent.</p>


                <h3>Section 13. Contact Us</h3>
                <p>If you have any questions about this Agreement, please send an email to service@podpartner.com.</p>
                <p>Last updated: 2024.7.30</p>

                <fieldset>
                    <button @click="agreement = false">Cancel</button>
                    <button @click="doAgree(true)" type="primary">I agree</button>
                </fieldset>

            </div>

        </UxDialog>

        <!-- 申请弹窗 -->
        <UxDialog :visible="apply.open" @close="onApplyClose()">

            <div class="wallet-apply-form" v-if="!apply.success">

                <p>Please select the issuing country of the bank card</p>

                <div class="wallet-apply-region">
                    <span>Country/Region</span>
                    <UxSelect v-model="apply.area" :options="country" :clearable="false"
                              placeholder="Select country/region" />
                    <em v-if="areaNotify" v-text="areaNotify.notify"></em>
                </div>

                <div class="wallet-apply-agreement">
                    <!-- <UxCheckbox v-model="apply.agree" @click.native="agreement = true" /> -->
                    <em :class="{ active: apply.agree }" @click="openAgreement()">
                        <svg-icon name="checkbox-active" />
                    </em>
                    <span>I have read and agreed</span>
                    <a @click="agreement = true">POD Wallet Terms of Service</a>
                </div>

                <fieldset>
                    <button @click="apply.open = false">Cancel</button>
                    <button @click="doApply()" :disabled="!apply.area || !apply.agree" type="primary">Submit</button>
                </fieldset>

            </div>

            <div class="wallet-apply-success" v-else>


                <svg-icon name="checkbox-active" />
                <h2>Request submitted</h2>
                <h3>Your request has been submitted. We will review <br>it within 24 hours.</h3>
                <div class="wallet-apply-concat">
                    <label>
                        <img src="https://img.podpartner.com/static/images-20231130/messenger.png" />
                        <input type="text" v-model="apply.messenger" placeholder="Messenger">
                    </label>

                    <label>
                        <img src="https://img.podpartner.com/static/images-20231130/whatsapp-active.png" />
                        <input type="text" v-model="apply.whatsapp" placeholder="Whatsapp">
                    </label>
                </div>

                <p>In addition, we will provide dedicated customer service. <br> Please leave any contact information if
                    needed.</p>

                <button @click="doFinish()" type="primary">OK</button>
            </div>

            <UxLoading2 :loading="apply.loading" />

        </UxDialog>

    </div>
</template>
<script>
import { mapGetters, mapState } from "vuex";
export default {
    props: {
        config: { type: Object, default: () => ({}) },
    },
    data () {
        return {
            apply: {
                open: false,
                loading: false,
                agree: false,
                area: '',
                messenger: '',
                whatsapp: '',
                success: false,
            },
            agreement: false,
            country: [
                { value: 'US', label: 'United States' },
                { value: 'EU', label: 'European Union countries' },
                { value: 'CA', label: 'Canada' },
                { value: 'UK', label: 'United Kingdom' },
            ]

        };
    },
    computed: {
        areaNotify () {
            const obj = {
                'US': { name: 'United States', notify: 'Please note that bank transfer are only possible with US-issued bank cards and USD.' },
                'EU': { name: 'European Union countries', notify: 'Please note that bank transfer are only possible with EU-issued bank cards and EUR.' },
                'CA': { name: 'Canada', notify: 'Please note that bank transfer are only possible with Canadian-issued bank cards and CAD.' },
                'UK': { name: 'United Kingdom', notify: 'Please note that bank transfer are only possible with UK-issued bank cards and GBP.' },
            }

            return obj[this.apply.area]
        }
    },
    methods: {
        openDialog () {
            this.agreement = false;
            this.apply.loading = false;
            this.apply.agree = false;
            this.apply.area = this.apply.open && this.apply.area ? this.apply.area : '';
            this.apply.messenger = '';
            this.apply.whatsapp = '';
            this.apply.success = false;
            this.apply.open = true;

        },

        openAgreement () {

            if (this.apply.agree) {
                this.apply.agree = false;
            } else {
                this.agreement = true;
            }

        },
        onApplyClose () {
            this.apply.success && this.$emit('reload');
            this.apply.open = false
        },

        // 同意
        doAgree (agree) {
            this.agreement = false;
            this.apply.agree = agree;
        },

        // 申请
        doApply () {
            this.apply.loading = true;
            this.$http('Wallet.setApply', { bank_country_code: this.apply.area }).then(res => {
                if (res.code === 0) {
                    this.apply.success = true;
                    this.apply.loading = false;
                } else {
                    this.$uxMessage.warning(res.msg);
                    this.apply.loading = false;
                }
            })
        },

        // 结束
        doFinish () {
            const messenger = this.apply.messenger.replace(/\s/g, '')
            const whatsapp = this.apply.whatsapp.replace(/\s/g, '');
            const concat = messenger || whatsapp;

            concat && this.$http('Wallet.setContact', { messenger: messenger, whatsapp: whatsapp });

            this.apply.success = false
            this.apply.open = false;
            this.$emit('reload')
        }
    },
    created () {

    },
};
</script>
<style lang="scss" scoped>
.wallet-un-activate {
    display: flex;
    flex-direction: column;
}

.wallet-banner {
    margin-top: 40px;
}

.open-before {
    height: 260px;
    background: #FFFFFF;
    border-radius: 8px;
    border: 1px solid #EBEBEB;
    display: flex;
    align-items: center;
    padding: 0 66px 0 78px;

    cite {
        flex: 1;

        h2 {
            font-family: Roboto-Medium, Roboto;
            font-weight: 500;
            font-size: 22px;
            color: #000000;
            line-height: 36px;
            max-width: 396px;
        }

        button {
            margin-top: 32px;
            width: 200px;
            height: 40px;
            background: linear-gradient(315deg, #FF813F 0%, #EA4C89 100%);
            border-radius: 10px;
            color: #fff;
            border: none;

            &:hover {
                color: hsla(0, 0%, 100%, .5);
            }
        }
    }

    figure {
        width: 388px;
        height: 216px;

        img {
            width: 100%;
            height: 100%;
        }
    }
}

.open-review {
    height: 260px;
    background: #FFF5E8;
    border-radius: 8px;
    border: 1px solid #E37E00;
    display: flex;
    align-items: center;
    padding-right: 68px;
    padding-left: 80px;

    h2 {
        font-family: Roboto-Medium, Roboto;
        font-weight: 500;
        font-size: 36px;
        color: #E37E00;
        line-height: 44px;
    }

    p {
        margin-top: 18px;
        max-width: 460px;
        font-family: Roboto, Roboto;
        font-weight: 400;
        font-size: 20px;
        color: #E37E00;
        line-height: 28px;
        margin-bottom: 6px;
    }

    cite {
        flex: 1;

    }

    figure {
        width: 298px;
        height: 260px;

        img {
            width: 100%;
            height: 100%;
        }
    }
}

.open-refuse {
    background: #FFFAFA;
    border-radius: 16px;
    border: 1px solid #C62828;
    padding: 40px 60px;
    box-sizing: border-box;
    position: relative;

    figure {
        position: absolute;
        right: 92px;
        top: 50%;
        width: 156px;
        height: 156px;
        transform: translateY(-50%);

        img {
            width: 100%;
            height: 100%;
        }
    }

    h2 {
        font-family: Roboto-Medium, Roboto;
        font-weight: 500;
        font-size: 24px;
        color: #C62828;
        line-height: 26px;
        margin-right: 272px;

    }

    h3 {
        margin-top: 14px;
        margin-right: 272px;

        font-family: Roboto-Medium, Roboto;
        font-weight: 500;
        font-size: 16px;
        color: #C62828;
        line-height: 26px;
    }

    p {
        margin-top: 2px;
        font-family: Roboto, Roboto;
        font-weight: 400;
        font-size: 14px;
        color: #C62828;
        line-height: 26px;
        max-width: 688px;
        margin-right: 272px;
    }

    h6 {
        margin-top: 14px;
        font-family: Roboto, Roboto;
        font-weight: 400;
        font-size: 14px;
        color: #555555;
        line-height: 26px;
        margin-right: 272px;

    }

    fieldset {
        display: flex;
        margin-top: 20px;
        margin-right: 272px;


        a {
            width: 160px;
            height: 40px;
            background: #FFFFFF;
            border-radius: 8px;
            border: 1px solid #E6E6E6;
            margin-right: 8px;
            display: flex;
            align-items: center;
            justify-content: center;

            img {
                width: 18px;
                height: 18px;
            }

            span {
                font-family: Roboto, Roboto;
                font-weight: 500;
                font-size: 14px;
                color: #000000;
                margin-left: 4px;
            }

            &:hover {
                background-color: #f6f6f6;
            }
        }
    }


}


.agreement-dialog {
    width: 1080px;
    box-sizing: border-box;
    padding: 32px 24px 48px;

    &>h2 {
        font-family: Roboto-Medium, Roboto;
        font-weight: 500;
        font-size: 32px;
        color: #000000;
        line-height: 36px;
        text-align: center;
        padding-bottom: 14px;
    }

    &>h3 {
        margin-top: 24px;
        font-family: Roboto-Medium, Roboto;
        font-weight: 500;
        font-size: 18px;
        color: #000000;
        line-height: 26px;
    }

    &>p {
        margin-top: 8px;
        font-family: Roboto, Roboto;
        font-weight: 400;
        font-size: 14px;
        color: #000000;
        line-height: 26px;
    }

    &>fieldset {
        margin-top: 48px;
        display: flex;
        justify-content: center;
        align-items: center;

        button {
            width: 156px;
            height: 40px;
            margin: 0 4px;

            &:last-child {
                width: 240px;
            }
        }
    }
}


.wallet-apply-form {
    width: 440px;
    height: 450px;
    padding: 60px;
    box-sizing: border-box;


    &>p {
        font-family: Roboto-Medium, Roboto;
        font-weight: 500;
        font-size: 18px;
        color: #000000;
        line-height: 24px;
        text-align: center;
        max-width: 280px;
        margin: 0 auto;
    }

    .wallet-apply-region {
        margin-top: 60px;
        position: relative;

        &>span {
            font-family: Roboto-Medium, Roboto;
            font-weight: 500;
            font-size: 14px;
            color: #000000;
            line-height: 16px;
        }

        &>.form-select {
            width: 100%;
            height: 36px;
            margin-top: 8px;
        }

        &>em {
            position: absolute;
            left: 0;
            top: 100%;
            margin-top: 8px;
            width: 100%;
            font-family: Roboto-Medium, Roboto;
            font-weight: 500;
            font-size: 12px;
            color: #000000;
            line-height: 14px;

            &::before {
                content: '*';
                margin-right: 4px;
            }
        }
    }

    .wallet-apply-agreement {
        margin-top: 80px;
        display: flex;
        align-items: center;
        font-family: Roboto, Roboto;
        font-weight: 400;
        font-size: 14px;
        color: #000000;
        line-height: 16px;
        white-space: nowrap;


        em {
            box-sizing: border-box;
            width: 16px;
            min-width: 16px;
            height: 16px;
            background: #ffffff;
            border-radius: 2px;
            border: 1px solid #9e9e9e;
            position: relative;
            cursor: pointer;

            svg {
                position: absolute;
                width: 10px;
                height: 10px;
                left: 50%;
                top: 50%;
                margin-left: -5px;
                margin-top: -5px;
                color: #ea4c89;
                display: none;
            }

            &.active {
                svg {
                    display: block;
                }
            }
        }

        &>span {
            margin-left: 4px;
            margin-right: 2px;
        }

        &>a {
            color: #087196;
            cursor: pointer;
            font-size: 12px;
            font-weight: 500;
            text-decoration: underline;

            &:hover {
                color: #287e9c;
                text-decoration: none;
            }
        }
    }

    fieldset {
        margin-top: 28px;
        display: flex;

        button {
            width: 156px;
            height: 38px;

            &+button {
                margin-left: 8px;
            }
        }
    }
}

.wallet-apply-success {
    width: 440px;
    height: 450px;
    padding: 60px 24px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;

    &>svg {
        width: 40px;
        height: 40px;
        box-sizing: border-box;
        padding: 12px;
        background: #23B98F;
        color: #fff;
        border-radius: 20px;
    }

    &>h2 {
        margin-top: 12px;
        font-family: Roboto-Medium, Roboto;
        font-weight: 500;
        font-size: 18px;
        color: #000000;
        line-height: 24px;
        text-align: center;
    }

    &>h3 {
        font-family: Roboto, Roboto;
        font-weight: 400;
        font-size: 14px;
        color: #292929;
        line-height: 20px;
        margin-top: 8px;
        text-align: center;
    }

    .wallet-apply-concat {
        display: flex;
        margin-top: 46px;

        label {
            display: flex;
            align-items: center;

            &+label {
                margin-left: 20px;
            }
        }

        img {
            width: 16px;
            height: 16px;
            margin-right: 4px;
        }

        input {
            width: 140px;
            height: 32px;
        }
    }

    &>p {
        margin-top: 18px;
        font-family: Roboto, Roboto;
        font-weight: 400;
        font-size: 12px;
        color: #000;
        line-height: 20px;
        text-align: center;
    }


    &>button {
        width: 188px;
        height: 38px;
        margin-top: 32px;
    }

}
</style>
